<template>
  <picker
    mode="multiSelector"
    :value="data.multiIndex"
    :range="multiArray"
    @change="handleValueChange"
    @columnchange="handleColumnChange">
    <slot></slot>
  </picker>
</template>

<script lang="ts" setup>
import { reactive, watch, computed } from 'vue';
// import CHINA_REGIONS from './regions.json';
import { queryRegionTree } from '@/service/apis/mine';
const emit = defineEmits(['getRegion']);
interface Props {
  defaultRegions: any;
  defaultRegionCode: String;
  defaultRegion: any;
}

const data = reactive({
  CHINA_REGIONS: [] as any,
  cityArr: [] as any,
  districtArr: [] as any,
  multiIndex: [0, 0, 0],
  isInitMultiArray: false,
  defaultRegion: '',
});
queryRegionTree({})
  .then((res: any) => {
    console.log('res======', res);
    if (res) {
      data.CHINA_REGIONS = res;
      console.log('res[0]======', res[0]);
      data.cityArr = res[0].childs;
      data.districtArr = res[0].childs[0].childs;
      // data.info = res;
    }
  })
  .catch(() => {});
const pickedArr = computed(() => {
  // 进行初始化
  if (data.isInitMultiArray) {
    return [
      data.CHINA_REGIONS,
      data.CHINA_REGIONS[0].childs,
      data.CHINA_REGIONS[0].childs[0].childs,
    ];
  }
  return [data.CHINA_REGIONS, data.cityArr, data.districtArr];
});
const multiArray = computed(() => {
  console.log('=====2222====', pickedArr);

  return pickedArr.value.map((arr: any) => arr.map((item: { name: any }) => item.name));
});

watch(data.defaultRegion, (region: any, oldRegion: any) => {
  if (Array.isArray(region)) {
    // 避免传的是字面量的时候重复触发
    oldRegion = oldRegion || [];
    if (region.join('') !== oldRegion.join('')) {
      handleDefaultRegion(region);
    }
  } else if (region && region.length == 6) {
    handleDefaultRegion(region);
  } else {
    console.warn('defaultRegion非有效格式');
  }
});

const handleColumnChange = (e: any) => {
  // console.log(e);
  data.isInitMultiArray = false;
  let col = e.detail.column;
  let row = e.detail.value;
  data.multiIndex[col] = row;
  try {
    switch (col) {
      case 0:
        if (data.CHINA_REGIONS[data.multiIndex[0]].childs.length == 0) {
          data.cityArr = data.districtArr = [data.CHINA_REGIONS[data.multiIndex[0]]];
          break;
        }
        data.cityArr = data.CHINA_REGIONS[data.multiIndex[0]].childs;
        data.districtArr = data.CHINA_REGIONS[data.multiIndex[0]].childs[data.multiIndex[1]].childs;
        break;
      case 1:
        data.districtArr = data.CHINA_REGIONS[data.multiIndex[0]].childs[data.multiIndex[1]].childs;
        break;
      case 2:
        break;
    }
  } catch (e) {
    // console.log(e);
    data.districtArr = data.CHINA_REGIONS[data.multiIndex[0]].childs[0].childs;
  }
};
const handleValueChange = (e: any) => {
  // 结构赋值
  let [index0, index1, index2] = e.detail.value;
  console.log('arr0====', pickedArr.value);

  let [arr0, arr1, arr2] = pickedArr.value;
  let address = [arr0[index0], arr1[index1], arr2[index2]];
  console.log('address', address);
  emit('getRegion', address);
};
const handleDefaultRegion = (region: any) => {
  const isCode = !Array.isArray(region);
  data.isInitMultiArray = false;
  let children = data.CHINA_REGIONS;
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < children.length; j++) {
      let condition = isCode
        ? children[j].code == region.slice(0, (i + 1) * 2)
        : children[j].name.includes(region[i]);
      if (condition) {
        // 匹配成功进行赋值
        // console.log(i,j,children.length-1);
        children = children[j].childs;
        if (i == 0) {
          data.cityArr = children;
        } else if (i == 1) {
          data.districtArr = children;
        }
        data.multiIndex[i] = j;
        // data.$set(data.multiIndex, i, j);
        // console.log(this.multiIndex);
        break;
      } else {
        // 首次匹配失败就用默认的初始化
        // console.log(i,j,children.length-1);
        if (i == 0 && j == children.length - 1) {
          data.isInitMultiArray = true;
        }
      }
    }
  }
};
</script>
